<!--抽屉内容展示-->
<template>
  <el-drawer :with-header="false">
    <span>个性设置</span>
    <div class="Tag-div">
      <el-tag v-for="(item, index) in prop.TagValue.tags" closable :key="index" @close="handleDelete(item, index)">
        <a :href="item['tag_URL']" onclick="return false">
          {{ item['tag_Name'] }}
        </a>
      </el-tag>
    </div>

    <el-button @click="handleAddButton">添加</el-button>
    <div v-if="showTags">
      <div>
        <el-input v-model="input_TagAddress" placeholder="请输入完整地址">
          <template #prepend>网址</template>
        </el-input>
      </div>
      <div>
        <el-input v-model="input_TagName" placeholder="请输入标签名">
          <template #prepend>标签名</template>
        </el-input>
      </div>
      <el-button @click="handleAddTagsByUser">
        确定添加
      </el-button>
    </div>
    <div class="Tag-div" v-if="showTags" v-for="items in Tags">
      <div style="padding-bottom: 10px"></div>
      <ul class="TAG">
        <li v-for="(item, index) in items.tags">
          <a :href="item['tag_URL']" onclick="return false" @click="handleAddTags(items, index)">
            {{ item['tag_Name'] }}
          </a>
        </li>
      </ul>
    </div>
    <el-button v-if="showTags" @click="showTags = !showTags">
      退出选择
    </el-button>

  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

import {getDefaultTagFromServer, getUserTagFromServer} from "../api/get";
import { checkUserLogin } from '../utils';
import { setUserTagIntoServer, deleteTagByTagId } from "../api/post";

const input_TagAddress = ref("")
const input_TagName = ref("")
const prop = defineProps(['TagValue'])
const Tags = ref<any>()
const showTags = ref(false)
const countInsetIntoListTimes = ref(true)

import { getCurrentInstance } from 'vue'
//@ts-ignore
import { ElMessageBox } from 'element-plus'


const { appContext } = getCurrentInstance()!

// 初始化界面
function initDrawer(){
  prop.TagValue.value = getUserTagFromServer();
}

const inputByUserList = reactive([
  {
    block_name: '',
    tags: [
      {
        tag_Name: String,
        tag_URL: String,
        tag_id: Number
      },
    ]
  }
])



// 用户点击标签产生的数据添加到相应block中并保存数据库

async function handleAddTags(items: any, _index: any) {
  const inputByUser = {
    block_name: prop.TagValue["block_name"],
    tags: [
      {
        tag_Name: items.tags[_index].tag_Name,
        tag_URL: items.tags[_index].tag_URL,
        tag_id: items.tags[_index].tag_id
      }
    ]
  }
  if (await setUserTagIntoServer(inputByUser)) {
    // confirm("提交成功")
    await ElMessageBox.confirm(
      "提交成功"
    ,appContext)

  }

  if (countInsetIntoListTimes.value) {
    inputByUserList.splice(0, 1)
    inputByUserList.push(inputByUser)
    countInsetIntoListTimes.value = false
  } else {
    inputByUserList[0].tags.push({
      tag_Name: items.tags[_index].tag_Name, tag_URL: items.tags[_index].tag_URL,
      tag_id: items.tags[_index].tag_id
    })
  }
  inputByUserList[0].block_name = items.block_name
  prop.TagValue.tags.push({ tag_Name: items.tags[_index].tag_Name, tag_URL: items.tags[_index].tag_URL })
}

// 用户手动输入的数据
async function handleAddTagsByUser() {
  if (input_TagName.value != null && input_TagName.value != ''
    && input_TagAddress.value != null && input_TagAddress.value != '') {
    prop.TagValue.tags.push({ tag_Name: input_TagName.value, tag_URL: input_TagAddress.value })

    const inputByUser = {
      block_name: prop.TagValue["block_name"],
      tags: [
        {
          tag_Name: input_TagName.value,
          tag_URL: input_TagAddress.value,
          // tag_id自增 设置为空
          tag_id: '',
        }
      ]
    }
    if (await setUserTagIntoServer(inputByUser)) {
      await ElMessageBox.confirm(
          "提交成功"
          ,appContext)
    }
  } else {
    confirm("输入不可为空")
  }
}

// 点击添加按钮
async function handleAddButton() {
  const isLoggedIn = await checkUserLogin()
  if (!isLoggedIn) {
    confirm("请登录后操作")
    await ElMessageBox.confirm(
        "请登录后操作"
        ,appContext)
  } else {

    Tags.value = await getDefaultTagFromServer()
    showTags.value = true
  }
}

// 点击删除按钮
async function handleDelete(item: any, index: any) {
  const isLoggedIn = await checkUserLogin();
  if (!isLoggedIn) {
    await ElMessageBox.confirm(
        "请登录后操作"
        ,appContext)
  } else {
    const isConfirm = confirm("确定删除")
    if (isConfirm){
      try {
        // 向后端发送删除请求
        await deleteTagByTagId(item.tag_id).then(()=>{
          prop.TagValue.tags.splice(index, 1);
          // 重载数据
          // buttonClick()
        })
        // 从 prop.TagValue.tags 中删除指定元素

      } catch (error) {
        console.error("删除失败", error);
        // 处理删除失败的情况
      }
    }
  }

  // 删除数据之后刷新一下数据
  const emit = defineEmits([ 'initTag'])

  function buttonClick() {
    alert("数据刷新")
    emit('initTag')
  }

}
</script>